<template>
  <nav class="navbar">
    <!-- 左：Logo -->
    <NuxtLink
      to="https://www.douyin.com/user/MS4wLjABAAAA77VM1AnQqXnud0JVV08VDF53REhvyTgbhPjhHLiW1_0JEw4VxHr-gc5B3wmRDRnO?from_tab_name=main"
      class="logo-link" target="_blank">
      <img src="/logo.png" alt="Logo" class="logo-img" />
      <span class="logo-text">金铲铲逸尘</span>
    </NuxtLink>

    <!-- 中：主导航（会随赛季附加条目） -->
    <ul class="nav-links">
      <li v-for="item in navItems" :key="item.to">
        <NuxtLink :to="item.to" active-class="active">{{ item.label }}</NuxtLink>
      </li>
    </ul>

    <!-- 右：赛季下拉 -->
    <div class="season-switch">
      <label class="season-label" for="season-select">赛季</label>
      <select id="season-select" :value="season" @change="onSeasonChange(($event.target as HTMLSelectElement).value)">
        <option v-for="v in items" :key="v.id" :value="v.name">
          {{ v.name }}
        </option>
      </select>
    </div>
  </nav>
</template>

<script setup lang="ts">
import { useSeasons } from '~/composables/useSeasons'

type NavItem = { label: string; to: string }

const router = useRouter()
const route = useRoute()

/** 基础导航（所有赛季都有） */
const BASE_ITEMS: NavItem[] = [
  { label: '热门阵容', to: '/' },
  { label: '铲铲资讯', to: '/news' },
]

/** 赛季专属导航（前端配置示例；也可以走后端，见文件末尾注释） */
const SEASON_EXTRA: Record<string, NavItem[]> = {
  // S15: [{ label: '强化果实', to: '/fruit' }],
  // S14: [{ label: '黑客入侵', to: '/hacker' }],
}

/** 拉赛季版本列表（你之前已经有这个 composable 了） */
const { items, latestActive } = useSeasons()

/* -------------------- A：同步赛季（URL <-> 下拉） -------------------- */

/** 当前赛季：来自 URL 的 ?season= */
const season = ref<string>(String(route.query.season || ''))

/** URL 改变时，同步到本地 season（比如你在首页改变了 ?season=） */
watch(() => route.query.season, (val) => {
  season.value = String(val || '')
})

/** 首次进入如果没有 season，用“最新生效版本”填上，并回到第1页 */
watchEffect(() => {
  if (!season.value && latestActive.value) {
    season.value = latestActive.value
    router.replace({ query: { ...route.query, season: season.value } })
  }
})

const DEFAULT_PAGE = '1'
const DEFAULT_SIZE = '9'

/** 下拉切换赛季：写回 URL（保留其他 query，比如搜索词），并回到第1页且重置分页大小 */
function onSeasonChange(next: string) {
  if (!next || next === season.value) return
  season.value = next
  const query = { ...route.query, season: season.value }

  if ('page' in query) query.page = DEFAULT_PAGE
  if ('size' in query) query.size = DEFAULT_SIZE

  router.push({ query })
}

/* -------------------- B：根据赛季计算导航条目 -------------------- */

const navItems = computed<NavItem[]>(() => {
  // 前端常量版：按当前 season 从映射里取附加菜单
  const extra = SEASON_EXTRA[season.value] || []
  return [...BASE_ITEMS, ...extra]
})

/* 
// 如果要走后端返回额外导航：
import type { Version } from '~/composables/useSeason'
const currentVersion = computed(() => versions.value.find(v => v.code === ver.value))
const navItems = computed<NavItem[]>(() => [
  ...BASE_ITEMS,
  ...((currentVersion.value?.extra_nav as NavItem[] | undefined) || [])
])
*/
</script>

<style scoped>
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to right, #b444e8, #63d7ee);
  padding: 0 20px;
  color: #fff;
  z-index: 1000;
  box-sizing: border-box;
}

.logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #fff;
}

.logo-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
  object-fit: cover;
  border: 2px solid #fff;
}

.logo-text {
  font-weight: 700;
  font-size: 20px;
}

.nav-links {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: #fff;
  text-decoration: none;
  opacity: .9;
  padding: 6px 8px;
  border-radius: 8px;
}

.nav-links a.active,
.nav-links a:hover {
  background: rgba(255, 255, 255, .16);
  opacity: 1;
}

/* 下拉样式：浅底深字，避免白字白底看不见选项 */
.season-switch {
  display: flex;
  align-items: center;
  gap: 8px;
}

.season-label {
  font-size: 13;
  color: #000000;
  opacity: .9;
}

.season-switch select {
  appearance: none;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #111827;
  padding: 6px 28px 6px 10px;
  cursor: pointer;
}

.season-switch select option {
  color: #111827;
  background: #fff;
}

@media (max-width: 640px) {
  .nav-links {
    display: none;
  }

  /* 小屏可先隐藏主菜单 */
}
</style>
